<template>
  <div class="common-layout">
    <el-container>
      <el-header class="header">
        <el-row>
          <el-col :span="12">
            <el-row>
              <el-col :span="12">
                <el-row>
                  <el-col :span="12">
                    <h2>{{ firstcity }}旅游</h2>
                  </el-col>
                  <el-col :span="12" class="mapbox">
                    <el-icon class="mapicon" @click="showmap"
                      ><Place
                    /></el-icon>
                    <span class="maptext" @click="showmap"
                      >{{ firstcity }}地图</span
                    >
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="12">
                <img src="./logoserve.png" />
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="12" class="weatherbox">
            <el-row>
              <el-col :span="20">
                <span style="color: red; margin-right: 20px"
                  >{{ firstcity }}天气</span
                >
                <span class="weathertext"
                  >{{ weather }}&nbsp;{{ downtem }}℃~{{ hiertem }}℃</span
                >
                <span class="weathertext">{{ time }}</span>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-header>
      <el-main class="main">
        <el-row>
          <el-col :span="12">
            <el-row class="citybox" v-for="el in srcList" :key="el.traid">
              <el-col :span="8">
                <a-tooltip
                  content="点击查看更多图片"
                  position="rt"
                  background-color="#722ED1"
                >
                  <img
                    :src="el.siteimg[0]"
                    style="width: 200px; height: 200px"
                    @click="onClick"
                  />
                  <a-image-preview-group
                    v-model:visible="visible"
                    v-model:current="current"
                    infinite
                    :srcList="el.siteimg"
                  />
                </a-tooltip>
              </el-col>
              <el-col :span="16">
                <p class="fontyiji">省份：{{ el.firstcity }}</p>
                <p class="fontyiji">城市：{{ el.secondcity }}</p>
                <p class="fonterji">介绍：{{ el.miaoshu }}</p>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-button
              type="danger"
              icon="Delete"
              circle
              @click="guanbiditu"
              v-if="show"
            />
            <span v-if="show">点击关闭地图</span>
            <map1 v-if="show"></map1>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { onMounted, getCurrentInstance, ref, nextTick } from "vue";
import map1 from "./map.vue";
import { useRoute } from "vue-router";
let route = useRoute();
let firstcity = route.query.firstcity;
let secondcity = route.query.secondcity;
// console.log(route.query,firstcity,secondcity)
const { proxy } = getCurrentInstance();
let time = ref();
let weather = ref();
let hiertem = ref();
let downtem = ref();

// 加载城市天气
onMounted(async () => {
  let result = await proxy.$axios(
    `https://v0.yiketianqi.com/api?unescape=1&version=v61&appid=22195857&appsecret=DYlDh7sw&city=${secondcity}`
  );
  // console.log(result.data);
  time.value = result.data.date;
  weather.value = result.data.wea;
  hiertem.value = result.data.tem1;
  downtem.value = result.data.tem2;
});

// 城市信息变量
const srcList = ref();
// 请求城市数据
onMounted(async () => {
  let cityres = await proxy.$axios(`/travlcity?firstcity=${firstcity}`);
  // console.log(cityres.data);
  srcList.value = cityres.data.cityselect;
});

// 控制城市弹窗图片
let visible = ref(false);
let current = ref(3);
let onClick = () => {
  visible.value = true;
};
// 控制地图的显示
let show = ref(0);
let showmap = () => {
  // console.log(show.value);
  show.value = 1;
};
let guanbiditu = () => {
  // console.log(show.value)
  show.value = 0;
};
</script>

<style lang='scss' scoped>
.header {
  background-color: lightblue;
  .mapbox {
    padding: 25px;
    .mapicon {
      color: gold;
      font-size: 24px;
      vertical-align: middle;
    }
    .maptext {
      text-align: center;
    }
  }
  .weatherbox {
    padding: 20px;
    height: 50px;
    line-height: 50px;
    .weathercolor {
      color: brown;
      font-size: 24px;
      vertical-align: middle;
    }
    .weathertext {
      margin-left: 10px;
    }
  }
}
.main {
  .citybox {
    margin-top: 10px;
    .fontyiji {
      font-size: 20px;
      font-weight: bold;
      margin-top: 20px;
    }
    .fonterji {
      font-size: 16px;
      margin-top: 50px;
    }
  }
}
</style>